<template>
  <div class="home">
    <!-- 搜索框 -->
    <div class="search">
      <input
        type="text"
        placeholder="免保证金用电脑"
        @click="$router.push('./SearchSug')"
      />
    </div>
    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="logo in loopLogo" :key="logo.id">
          <img :src="logo.logo" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 热销机型 -->
    <div class="hot-sale">
      <div class="tit"></div>
      <div class="hot">
        <div class="hot-con" v-for="hot in hotModel" :key="hot.id">
          <h4>{{ hot.title }}</h4>
          <div class="price">
            <div class="look">
              <span>￥{{ hot.minRent }}/月</span>
              <p>GO &gt;</p>
            </div>
            <img :src="hot.url" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 在线注册 -->
    <div class="online">
      <div class="tit">
        <h3>
          <img
            src="https://resources.edianzu.com/mall-wap/images/easy-rent-3m-e2f95a96.png"
            alt=""
          />
        </h3>
      </div>
      <div class="work">
        <div class="work-title" v-for="items in floors" :key="items.id">
          <p class="title">{{ items.name }}</p>
          <div class="work-con">
            <div class="list" v-for="pro in items.products" :key="pro.id">
              <p>{{ pro.title }}</p>
              <span>￥{{ pro.minRent }}/月</span>
              <img :src="pro.url" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { IHomeData } from "../types/types";

export default Vue.extend({
  name: "HomeView",
  data() {
    return {
      loopLogo: [] as IHomeData[], // 默认ts会将[]推断为never[]类型，组件模板中使用的时候，会报错。使用as断言，强制设置为某个类型。
      hotModel: [] as IHomeData[], // 热销机型
      floors: [] as IHomeData[], // 轮播图
    };
  },
  async created() {
    let {
      data: { floors, loopLogo, hotModel },
    } = await this.$request(
      "https://m.edianyun.com/product/queryIndexContent?isnToLoginPage=true",
      "GET"
    );
    this.loopLogo = loopLogo;
    this.hotModel = hotModel;
    this.floors = floors;
    console.log(floors);
  },
});
</script>
<style lang="less">
.home {
  height: calc(100vh - 50px); // 先写固定高 再写滚动
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  .search {
    height: 50px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    input {
      width: 200px;
      height: 30px;
      border: none;
      border-radius: 30px;
    }
  }
  /* 轮播图 */
  .my-swipe .van-swipe-item {
    // color: #fff;
    // font-size: 20px;
    // text-align: center;
    // background-color: #39a9ed;
    img {
      width: 100%;
      height: 210px;
    }
  }
  /* 热销机型 */
  .hot-sale {
    .tit {
      height: 65px;
      background: url(https://resources.edianzu.com/mall-wap/images/hot-product-7cfa0d3f.png)
        50% no-repeat;
      background-size: 100% 100%;
    }
    .hot {
      padding: 0 10px 10px 10px;
      box-sizing: border-box;
      background-color: #8c72e5;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .hot-con {
        width: 46vw;
        margin-top: 10px;
        background-color: #fff;
        border-radius: 5px;
        padding: 10px;
        box-sizing: border-box;
        h4 {
          font-weight: normal;
          font-size: 14px;
          text-align: left;
        }
        .price {
          display: flex;
          justify-content: space-between;

          .look {
            margin-top: 10px;
            span {
              margin-top: 10px;
              color: #7550dd;
              font-size: 14px;
            }
            p {
              margin-top: 10px;
              font-size: 12px;
              width: 40px;
              height: 15px;
              border-radius: 10px;
              line-height: 15px;
              background-color: rgb(243, 197, 243);
              color: #fff;
            }
          }
        }
        img {
          width: 51px;
          height: 51px;
        }
      }
    }
  }
}
/* 在线注册 */
/* 行政办公 */
.online {
  .tit {
    h3 {
      margin: 10px 0;
      img {
        height: 60px;
        display: block;
        margin: 0 auto;
      }
    }
  }
  .work {
    background-color: #8c72e5;
    padding: 0 10px 10px 10px;
    box-sizing: border-box;
    overflow: hidden;
    .work-title {
      background-color: #fff;
      margin-top: 10px;
      padding: 10px;
      .title {
        text-align: center;
        color: #7550dd;
        padding:10px 0;
      }
      .work-con {
        padding: 10px 10px 0 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        background-color: #7550dd;
        .list {
          width: 48%;
          background-color: #fff;
          margin-bottom: 10px;
          padding: 10px;
          box-sizing: border-box;
          p {
            font-size: 15px;
          }
          span {
            font-size: 14px;
            color: red;
          }
          img {
            width: 100px;
            height: 100px;
          }
        }
      }
    }
  }
}
</style>
